<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="myInput">
  <p id="myP"></p>
  <script>
    const _data = {
      message: '默认值' // 临时存储值
    }

    function change (ev) {
      _data.message = ev.target.value // 获取输入框里最新的值
    }

    const data = { // 准备类似data里的数据
      message: ''
    }

    document.getElementById('myInput').oninput = function(e) {
      data.message = e.target.value
    }

    // 参数1: 监听的对象, 参数2: 监听对象里的属性名, 参数3: 固定写法
    Object.defineProperty(data, 'message', {  // 数据 -> 页面
      // data.message =  xxx 赋值的时候, 才会触发
      set (val) {
        // 更新页面(所有跟message变量相关的界面)
        document.getElementById('myP').innerHTML = val
        document.getElementById('myInput').value = val
        // 更新message的值
        _data.message = val
      },
      get () {
        // return到你 写data.message的地方
        return _data['message']
      },
    })
  </script>
</body>
</html>
